<template>
  <div>
    <!-- 导入顶部的组件 因为是响应式的 所以我们要使用elementui的栅格布局 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <cards title="总销售额" count="￥126560">
          <template slot="charts">
            <span>周同比 12% <i class="el-icon-caret-top"></i></span>

            <span>日同比 11% <i class="el-icon-caret-bottom"></i></span>
          </template>
          <template slot="footer"> 日销售额￥ 12423 </template>
        </cards>
      </el-col>
      <el-col :span="6">
        <cards title="访问量" count="88460">
          <template slot="charts">
            <lineVue color="#976fe1"></lineVue>
          </template>
          <template slot="footer"> 日访问量 1234 </template>
        </cards>
      </el-col>
      <el-col :span="6">
        <cards title="支付笔数" count="88460">
          <template slot="charts">
            <barVue></barVue>
          </template>
          <template slot="footer"> 转化率 65% </template>
        </cards>
      </el-col>
      <el-col :span="6">
        <cards title="运营活动效果" count="78%">
          <template slot="charts">
            <barVue2></barVue2>
          </template>
          <template slot="footer">
            <span>周同比 12% <i class="el-icon-caret-top"></i></span>

            <span>日同比 11% <i class="el-icon-caret-bottom"></i></span>
          </template>
        </cards>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import cards from "../cards/cards.vue";
import lineVue from "../charts/line.vue";
import barVue from "../charts/bar.vue";
import barVue2 from "../charts/bar2.vue";
export default {
  name: "Dashboard",
  components: { cards, lineVue, barVue, barVue2 },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
